'use client';

import { TEXT } from '@/pao/index';
import {
    LangClassDef, LangGenericParameterDef, LangProgram, LangTypeAnyType, LangTypeAnyValue,
    LangTypeArray, LangTypeBoolean, LangTypeNull, LangTypeNumber, LangTypeString
} from '@/pao/lang';
import { LangModule } from '@/pao/lang/module';
import { registerLangEditors } from '@/pao/lang/ui';
import { LangUICanvas } from '@/pao/lang/ui/base';
import { range } from '@/pao/paoBase';
import { EditorPublic } from '@/pao/web/dataEdit';
import { css } from '@emotion/css';

const classDef = new LangClassDef();
classDef.setProps({
	name: 'Class 1',
});
const testModule = new LangModule().setProps({
			name: 'main',
			label: TEXT('主模块'),
			statements: [
				classDef
			]
		});
const mainProgram = new LangProgram().setProps({
	modules: [
		new LangModule().setProps({
			name: 'global',
			label: TEXT('全局'),
			statements: [
				LangTypeAnyType,
				LangTypeAnyValue,
				LangTypeNull,
				LangTypeArray,
				LangTypeBoolean,
				LangTypeNumber,
				LangTypeString,
			]
		}),
		testModule
	]
});

// debugger;
registerLangEditors();

classDef.genericParameterList = range(0, 3).map(i=> new LangGenericParameterDef().setProps({
	name: `T ${i + 1}`,
	desciption: TEXT('Description')
}));
// debugger;
const editor = EditorPublic.createEditor(testModule) 

const canvas = new LangUICanvas().setProps({
	program: mainProgram,
	children: <div className={css`min-width: 300px;`}>
		{editor}
	</div>
})

export default function Page() {
  return canvas.render();
	// const myClass = css`
	// 	border: 1px solid #003cffff;
	// 	min-width: 20px; 
	// 	min-height: 10px; 
	// 	display: flex; 
	// 	flex-direction: row;
	// 	align-items: near;
	// 	flex-wrap: wrap; `;
	// return <div className={css`display: flex; 
	// 		flex-direction: row;
	// 		align-items: near;
	// 		flex-wrap: wrap; 
	// 		width: 100%;`}>
	// 	{range(0,30).map(i=> <>
	// 		{range(0,10).map(i=> 
	// 			<>
	// 				<div key={i} className={myClass}>
	// 					test{i}
	// 				</div>
	// 				+
	// 			</>
	// 		)}
	// 		<div>+</div>
	// 	</>)}
	// </div>
}